<!--  -->
<template>
  <div class="modi-info">
    <!-- <HeaderTop title="设置"></HeaderTop> -->
    <div class="info-list">
      <div class="info info-avatar">
        <div class="title">头像</div>
        <div class="pic">
          <div class="picture" :style="'backgroundImage:url('+headerImage+')'"></div>
          <input class="upload-input" accept="image" type="file" @change="upload">
        </div>
      </div>
      <div class="info info-name">
        <div class="title">昵称</div>
        <input class="name" type="text" placeholder="皮皮哥" v-model="nickName" @blur="modiNicname">
      </div>
    </div>
    <div class="advice-btn">
      <button class="sub" @click="logout">退出登录</button>
    </div>
  </div>
</template>

<script>
import Exif from 'exif-js'
// import HeaderTop from '../HeaderTop/HeaderTop'
import {mapState} from 'vuex'
import {MessageBox} from 'mint-ui'
export default {
  data () {
    return {
      headerImage:'',
      picValue:'',
      nickName:'',
      userId:null,
      token:'',
      profileInfo:{}
    };
  },

  components: {
      MessageBox
  },
  computed: {
    ...mapState(['userInfo'])
  },
  mounted(){
    this.userId = this.userInfo.userInfo.id
    this.token = this.userInfo.token
    this.getAvatar()
  },
  methods: {
    async getAvatar(){
      const result = await this.API.reqAvatar({userId:this.userId,token:this.token})
      if(result.retCode === '000'){
        this.profileInfo = result.retData
        this.nickName = result.retData.nickName
        this.headerImage = result.retData.picUrl
      }
    },
    logout(){
      const {userId,token} = this
      MessageBox({
        title:'温馨提示',
        message:'确定退出登录吗?',
        showCancelButton:true,
        confirmButtonText:'退出',
        cancelButtonText:'取消'
      }).then(action => {
        if(action == 'confirm'){
          console.log(action)
          localStorage.setItem('token', '')
          localStorage.setItem('userId', '')
          localStorage.setItem('userInfo','')
          this.$store.dispatch('logout',{userId:this.userId,token:this.token})
          this.$router.replace('/login')
        }else{
          console.log(action)
        }
      })
      // this.$dialog.confirm({
      //   message: '确定退出吗？'
      // }).then(()=>{ // on confirm
      //   localStorage.setItem('token', '')
      //   localStorage.setItem('userId', '')
      //   localStorage.setItem('userInfo','')
      //   this.$store.dispatch('logout',{userId:this.userId,token:this.token})
      //   this.$router.replace('/login')
      // }).catch(()=>{ // on cancel
      // })
    },

    async modiNicname(){
      const {userId,token,nickName} = this
      const result = await this.API.reqModiNicname({userId,token,nickName})
      console.log(result)
    },

    async upload (e) {
      let files = e.target.files || e.dataTransfer.files;
      if (!files.length) return;
      this.picValue = files[0];
      console.log(files[0])
      const formData = new FormData()
      formData.append('userId', this.userId)
      formData.append('token', this.token)
      formData.append('file', files[0])
      const result = await this.API.reqModiAvatar(formData)
      if(result.retCode === '000'){
        this.getAvatar()
      }
    },
    // imgPreview (file) {
    //   let self = this;
    //   let Orientation;
    //   //去获取拍照时的信息，解决拍出来的照片旋转问题
    //   Exif.getData(file, function(){
    //     Orientation = Exif.getTag(this, 'Orientation');
    //   });
    //   // 看支持不支持FileReader
    //   if (!file || !window.FileReader) return;
 
    //   if (/^image/.test(file.type)) {
    //     // 创建一个reader
    //     let reader = new FileReader();
    //     // 将图片2将转成 base64 格式
    //     reader.readAsDataURL(file);
    //     // 读取成功后的回调
    //     reader.onloadend = function () {
    //       let result = this.result;
    //       let img = new Image();
    //       img.src = result;
    //       //判断图片是否大于100K,是就直接上传，反之压缩图片
    //       if (this.result.length <= (100 * 1024)) {
    //         self.headerImage = this.result;
    //         console.log(11111)
    //         // console.log(self.headerImage)
    //         self.postImg(self.headerImage);
    //       }else {
    //         img.onload = function () {
    //           let data = self.compress(img,Orientation);
    //           self.headerImage = data;
    //           console.log(22222)
    //           self.postImg(self.headerImage);
    //         }
    //       }
    //     } 
    //     }
    //   },
    //   async postImg (file) {
    //     //这里写接口
    //     const {userId,token} = this
    //     console.log(file)
    //     // console.log(this.headerImage)
    //     const result = await this.API.reqModiAvatar({userId,token,file})
    //     console.log(result)
    //   },


    //   rotateImg (img, direction,canvas) {
    //     //最小与最大旋转方向，图片旋转4次后回到原方向    
    //     const min_step = 0;    
    //     const max_step = 3;      
    //     if (img == null)return;    
    //     //img的高度和宽度不能在img元素隐藏后获取，否则会出错    
    //     let height = img.height;    
    //     let width = img.width;      
    //     let step = 2;    
    //     if (step == null) {    
    //         step = min_step;    
    //     }    
    //     if (direction == 'right') {    
    //         step++;    
    //         //旋转到原位置，即超过最大值    
    //         step > max_step && (step = min_step);    
    //     } else {    
    //         step--;    
    //         step < min_step && (step = max_step);    
    //     }     
    //     //旋转角度以弧度值为参数    
    //     let degree = step * 90 * Math.PI / 180;    
    //     let ctx = canvas.getContext('2d');    
    //     switch (step) {    
    //       case 0:    
    //           canvas.width = width;    
    //           canvas.height = height;    
    //           ctx.drawImage(img, 0, 0);    
    //           break;    
    //       case 1:    
    //           canvas.width = height;    
    //           canvas.height = width;    
    //           ctx.rotate(degree);    
    //           ctx.drawImage(img, 0, -height);    
    //           break;    
    //       case 2:    
    //           canvas.width = width;    
    //           canvas.height = height;    
    //           ctx.rotate(degree);    
    //           ctx.drawImage(img, -width, -height);    
    //           break;    
    //       case 3:    
    //           canvas.width = height;    
    //           canvas.height = width;    
    //           ctx.rotate(degree);    
    //           ctx.drawImage(img, -width, 0);    
    //           break;
    //     }    
    // },

    // 压缩图片
    // compress(img,Orientation) {
    //   let canvas = document.createElement("canvas");
    //   let ctx = canvas.getContext('2d');
    //     //瓦片canvas
    //   let tCanvas = document.createElement("canvas");
    //   let tctx = tCanvas.getContext("2d");
    //   let initSize = img.src.length;
    //   let width = img.width;
    //   let height = img.height;
    //   //如果图片大于四百万像素，计算压缩比并将大小压至400万以下
    //   let ratio;
    //   if ((ratio = width * height / 4000000) > 1) {
    //     console.log("大于400万像素")
    //     ratio = Math.sqrt(ratio);
    //     width /= ratio;
    //     height /= ratio;
    //   } else {
    //     ratio = 1;
    //   }
    //   canvas.width = width;
    //   canvas.height = height;
    //     //        铺底色
    //   ctx.fillStyle = "#fff";
    //   ctx.fillRect(0, 0, canvas.width, canvas.height);
    //   //如果图片像素大于100万则使用瓦片绘制
    //   let count;
    //   if ((count = width * height / 1000000) > 1) {
    //     console.log("超过100W像素");
    //     count = ~~(Math.sqrt(count) + 1); //计算要分成多少块瓦片
    //     //            计算每块瓦片的宽和高
    //     let nw = ~~(width / count);
    //     let nh = ~~(height / count);
    //     tCanvas.width = nw;
    //     tCanvas.height = nh;
    //     for (let i = 0; i < count; i++) {
    //       for (let j = 0; j < count; j++) {
    //         tctx.drawImage(img, i * nw * ratio, j * nh * ratio, nw * ratio, nh * ratio, 0, 0, nw, nh);
    //         ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh);
    //       }
    //     }
    //   } else {
    //     ctx.drawImage(img, 0, 0, width, height);
    //   }
    //   //修复ios上传图片的时候 被旋转的问题
    //   if(Orientation != "" && Orientation != 1){
    //     switch(Orientation){
    //       case 6://需要顺时针（向左）90度旋转
    //           this.rotateImg(img,'left',canvas);
    //           break;
    //       case 8://需要逆时针（向右）90度旋转
    //           this.rotateImg(img,'right',canvas);
    //           break;
    //       case 3://需要180度旋转
    //           this.rotateImg(img,'right',canvas);//转两次
    //           this.rotateImg(img,'right',canvas);
    //           break;
    //     }
    //   }
    //   //进行最小压缩
    //   let ndata = canvas.toDataURL('image/jpeg', 0.1);
    //   console.log('压缩前：' + initSize);
    //   console.log('压缩后：' + ndata.length);
    //   console.log('压缩率：' + ~~(100 * (initSize - ndata.length) / initSize) + "%");
    //   tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0;
    //   return ndata;
    // },
  }
}

</script>
<style lang='stylus' scoped>
@import "../../common/stylus/mixins.styl"
.modi-info
    // margin-top 45px
    padding-bottom 0 !important
    width 100%
    height 100%
    background #fff
    .info-list
        font-size 15px
        color #AAAAAA
        .info
            height 60px
            display flex
            justify-content space-between
            align-items center
            // background #DBDBDB
            margin 0 10px
            padding 0 10px
            bottom-border-1px(#EEEEEE)
            .pic
              height 44px
              width 44px
              position relative
              border-radius 50%
              border: 1px solid #d5d5d5;
              overflow hidden
              .picture
                height 44px
                width 44px
                background-position: center center;
                background-repeat: no-repeat;
                background-size: cover; 
              .upload-input
                height 44px
                width 44px
                position absolute
                top 0
                left 0
                opacity 0
            &.info-name
              .name
                text-align right
    .advice-btn
        margin-top 40px
        display flex 
        justify-content center
        .sub
            position fixed
            bottom 20px
            border 1px solid #e4e4e4
            width 345px
            border-radius 100px
            height 40px
            font-size 14px
            background #145B3E
            color #fff
</style>